function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}

var index = 0;
var t = null; 
var pics = byId("banner").getElementsByTagName("div");
var len = pics.length;
var dots = byId("dots").getElementsByTagName("span");
// var out = getElementById("bannerOut");
var menu = byId("menu-content");
var menuItems = menu.getElementsByClassName("menu-item");
var subMenu = byId("sub-menu")
var subItems = subMenu.getElementsByClassName("inner-box");
var innerBox = subMenu.getElementsByClassName("inner-box")



var colorObj = {0:"#ee6900",
                1:"#eb8203",
                2:"#e75607",
                3:"#6b01c7",
                4:"#fea525",
                5:"#ffa08c",
                6:"#8e3c26",
                7:"#0193e6",
                8:"#22449e",
                9:"#fcf197"                
}

//图片划过的范围的盒子
function sildeImg(){
//     var banner = document.getElementById("div");
    var banner = document.getElementById("banner");
    banner.onmouseover = function(){
        //划过清除定时器
        if(t) clearInterval(t);
    };
    banner.onmouseout = function(){
        t = setInterval(function(){
            index++;
            if(index >= len){
                index = 0;
            }
            changeImg();
        },2000);
    }

    //自动在innerBanner上触发鼠标离开的事件
    banner.onmouseout();

    //点击原点切换图片
        //遍历所有原点，绑定事件
    for(var d=0;d<len;d++){
        //给所有span添加一个id的属性，值为d，作为当前span的索引
        dots[d].id = d;
        dots[d].onclick = function(){
            //改变index为当前span的索引
            index = this.id;
            // this.className = "active";
            //调用changeImg,实现切换图片
            changeImg();
        }
    }


    //导航菜单
        //遍历主菜单，且绑定事件
    for(var m=0;m<menuItems.length;m++){
        // console.log(m);
        //给每一个menu-item定义key属性，作为索引
        menuItems[m].setAttribute("key",m);
        menuItems[m].onmouseover = function(){
            subMenu.className = "sub-menu";
            var idx = this.getAttribute("key");
            for(var j=0;j<innerBox.length;j++){
                innerBox[j].style.display = "none";
                //划过的时候，主菜单变化
                menuItems[j].style.background = "none";
                menuItems[j].style['border-bottom'] = 'none';
            }
            menuItems[idx].style.background = "white";
            menuItems[idx].style['border-bottom'] = '1px solid gray';
            innerBox[idx].style.display = "block";
        }
        menuItems[m].onmouseout = function(){
            for(var j=0;j<innerBox.length;j++){
                menuItems[j].style.background = "none";
                menuItems[j].style['border-bottom'] = 'none';
            }
        }
    }

    menu.onmouseout = function(){
        subMenu.className = "sub-menu hide";
    }
    subMenu.onmouseover = function(){
        this.className = "sub-menu";
    }
    subMenu.onmouseout = function(){
        this.className = "sub-menu hide";
    }

}

//切换图片
function changeImg(){
    //遍历inndeBanner下所有的div,将div隐藏，将span清除类
    for(var i=0;i<len;i++){
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    //根据index索引找到当前div和当前span，设置样式
    pics[index].style.display = "block";
    dots[index].className = "active";
    // console.log(index);
    // console.log(pics[index])
    var bannerOut = pics[index].parentNode.parentNode;
    // console.log(bannerOut);
    bannerOut.style.backgroundColor = colorObj[index];
    // console.log(bannerOut);
}

sildeImg();


